import {
  Checkbox,
  CheckboxGroup,
  Form,
  FormItem,
  Image,
  message,
  Modal,
  Space,
  Spin,
  Textarea
} from 'ant-design-vue'
import { defineComponent, ref } from 'vue'

import { riverApi } from '@/apis'
import { WithdrawRejectReq } from '@/apis/riverTypes'
import { isValueEmpty } from '@/utils'

import { financeRejectTypeOptions } from '../../constants'

export default defineComponent({
  name: 'FinanceRejectDialog',
  emits: ['confirm'],
  setup(props, { emit }) {
    const showDlg = ref(false)
    const loading = ref(false)
    const confirmLoading = ref(false)
    const disabled = ref(false)
    const data = ref({} as WithdrawRejectReq)
    const billImageList = ref(
      [] as {
        id: number
        image: string
      }[]
    )

    function open(id, preview = false) {
      disabled.value = preview
      data.value.id = id
      showDlg.value = true
      getDetail()
    }

    async function getDetail() {
      try {
        loading.value = true
        billImageList.value = await riverApi.getBillImageList(data.value.id)
        if (disabled.value) {
          const detail = await riverApi.getWidthdrawDetail(data.value.id)
          data.value.invoiceIds = detail.invoiceList
            .filter(item => item.isError == 1)
            .map(item => item.id)
          data.value.rejectReason = detail.rejectReason
          data.value.rejectTitleTemp = detail.rejectTitle.split(',')
        }
      } catch {
        showDlg.value = false
      } finally {
        loading.value = false
      }
    }

    async function handleConfirm() {
      if (disabled.value) {
        showDlg.value = false
        return
      }
      if (isValueEmpty(data.value.invoiceIds)) {
        message.error('请选择问题发票')
        return
      }
      if (!data.value.rejectReason) {
        message.error('请输入驳回理由')
        return
      }
      if (!isValueEmpty(data.value.rejectTitleTemp)) {
        data.value.rejectTitle = data.value.rejectTitleTemp.join(',')
      }

      try {
        confirmLoading.value = true
        await riverApi.widthdrawReject(data.value)
        showDlg.value = false
        emit('confirm')
      } finally {
        confirmLoading.value = false
      }
    }

    return {
      showDlg,
      confirmLoading,
      billImageList,
      data,
      handleConfirm,
      open,
      loading,
      disabled
    }
  },
  render() {
    return (
      <Modal
        v-model:visible={this.showDlg}
        confirmLoading={this.confirmLoading}
        title="驳回申请"
        width={800}
        destroyOnClose
        onOk={this.handleConfirm}
      >
        <Spin spinning={this.loading}>
          <Form labelCol={{ span: 4 }}>
            <FormItem label={'问题发票'} required>
              <CheckboxGroup
                v-model:value={this.data.invoiceIds}
                disabled={this.disabled}
              >
                {this.billImageList.map(item => {
                  return (
                    <Space style={{ marginRight: '20px' }}>
                      <Checkbox value={item.id}></Checkbox>
                      <Image
                        style={{ height: '100px' }}
                        src={item.image}
                      ></Image>
                    </Space>
                  )
                })}
              </CheckboxGroup>
            </FormItem>

            <FormItem label={'驳回理由'} required>
              <Textarea
                disabled={this.disabled}
                v-model:value={this.data.rejectReason}
                placeholder="请填写驳回申请理由"
                maxlength={500}
                style={{ width: '400px' }}
              />
            </FormItem>
            <FormItem label={'驳回类型'}>
              <CheckboxGroup
                v-model:value={this.data.rejectTitleTemp}
                disabled={this.disabled}
              >
                {financeRejectTypeOptions.map(item => {
                  return (
                    <Checkbox value={String(item.value)}>{item.label}</Checkbox>
                  )
                })}
              </CheckboxGroup>
            </FormItem>
          </Form>
        </Spin>
      </Modal>
    )
  }
})
